<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html{
            background-image: url('https://img0.baidu.com/it/u=1117886865,4212387415&fm=253&fmt=auto&app=138&f=JPEG?w=780&h=439');
            /* background-repeat: no-repeat;
            background-size: 100% 900px; */
            position: relative;
        }
        body{
            margin: 100px  210px;
        
        }
        .left{
            width: 800px;
            height: 665px;
         
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            float: left;
            text-align: center;
        }
        .left div{
           width: 190px;
           height: 300px;
           box-sizing: border-box;
          
           border: 1px solid black;
          
        }
        .left div img{
            width: 100%;
            height: 75%;
        }
        .left div button{
         background-color: black;
         color: white;
         border: none;
        }
        .right{
            width: 420px;
            height: 600px;
           border: 1px solid black;
           margin-left: 10px;
            float: left;
            overflow: auto;
          padding-top: 30px;
            
        }
        .right div{
         width: 420px;
         height: 100px;
         display: flex;
         justify-content: space-around;
         align-items: center;
         text-align: center;
    
        }
        .right div img{
         width: 20%;
         height:80%;
        }
        .right div p:nth-of-type(1){
         width: 80px;
        
          box-sizing: border-box;
        }
        .right div .opt{
            width: 50px;
        }
        .tittle{
            position: absolute;
            top: 14.5%;
            left: 60.5%;
            font-size: 20px;
        }
        
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="tittle">购物车(0) &emsp;&emsp;总价:0元</div>
    <div class="right">
    </div>
   
</body>
</html>
<script src="./data.js"></script>
<script>
      var boxEle=document.querySelector('.left')
   function render(){
   
    var str = ``
    for (var i = 0; i < list.length; i++) {
        // list[i]就是数组中的每一条数据，数据类型是一个对象
        // 做字符串拼接 ，将html结构和数据拼接在一起
       
        str += `
        <div class="item${i}">
            <img src="${list[i].pic}" alt="">
            <p>${list[i].name}</p>
            <p>价格: ${list[i].price} </p>
            <button>加入购物车</button>
        </div>
        `
    }
    // 显示到页面中（哪个标签下呢？box之下）
    boxEle.innerHTML = str

   }
   render()

   var shuliang=1
var boxEle2=document.querySelector('.right')
   function renderGouwuche(left){
    
    var str = ``
    for(i=0;i<left.length;i++){
        if(oo.left[0]===oo.left[0]){
            shuliang++
        }
        str += `
        <div class="item">
            <input type="checkbox">
            <img src="${left[i].pic}" alt="">
            <p>${left[i].name}</p>
            <p>价格: ${left[i].price} </p>
            <div class="opt">
                <span>-</span>
                <span>${shuliang}</span>
                <span>+</span>
            </div>
            <p>删除收藏</p >
          
        </div>
        `
        boxEle2.innerHTML = str


        //计算商品的数量
       var count= left.reduce((t,item)=>{
            return t+item.count
        },0)
        //总金额
        var zongjia= left.reduce((t,item)=>{
            return t+item.count*item.price
        },0)
       
       
       
        //渲染商品数量
        document.querySelector('.tittle').innerHTML=`购物车(${count})&emsp;&emsp;总价:${zongjia}元`
    }
       
    }
    // 显示到页面中（哪个标签下呢？box之下）
  
  
    //购物车数据
    var oo={left:[]}
    //给left绑定点击事件
    boxEle.onclick=function(e){
        if(e.target.tagName=='BUTTON'){
            console.log(e);
           var btns= [...document.querySelectorAll('button')]
          
        
           var index=btns.findIndex((item)=>{
         
            return item==e.target
         
           })
           oo.left.push(list[index])
           console.log(oo.left);
          
            renderGouwuche(oo.left)
        
          
         
        }
    }

    var ooo=new Proxy(oo,{
        set:(a,b,c)=>{console.log('修改了oo对象',a,b,c);},
        get:(a,b,c)=>{console.log('获取了oo对象',a,b,c);}
    })
</script>
